const createValueSetter = (field: string) => {
  return {
    get({ data }) {
      return data[field]
    },
    set({ data }, value: string) {
      data[field] = value
    }
  }
}
const createColorSetter = (title: string, valueKey: string) => {
  return {
    title,
    type: 'colorpicker',
    options: {
      locale: true
    },
    value: createValueSetter(valueKey)
  }
}
export default {
  '@init'({ style }) {
    style.width = '100%'
    style.height = '100%'
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': {
    items: [
      {
        title: '节点样式',
        items: [
          createColorSetter('字体', 'normalColor'),
          createColorSetter('边框', 'normalBorder'),
          createColorSetter('背景', 'normalBack')
        ]
      },
      {
        title: '高亮节点',
        items: [
          createColorSetter('字体', 'heighLightColor'),
          createColorSetter('边框', 'heighLightBorder'),
          createColorSetter('背景', 'heighLightBack')
        ]
      },
      {
        title: '节点点击',
        type: '_Event',
        options: {
          outputId: 'nodeClick'
        }
      }
    ]
  }
}
